import React, { FC } from "react"
import { alpha, styled } from "@mui/material/styles"
import { Card, Typography } from "@mui/material"
import Iconify from "../Iconify"
import { SxProps } from "@mui/system"

const IconWrapperStyle = styled("div")(({ theme }) => ({
  margin: "auto",
  display: "flex",
  borderRadius: "50%",
  alignItems: "center",
  width: theme.spacing(8),
  height: theme.spacing(8),
  justifyContent: "center",
  marginBottom: theme.spacing(3),
}))

interface TSideSectionProps {
  color?: string
  icon: string
  title: string
  subTitle: string
  sx?: SxProps
}

const TSideSection: FC<TSideSectionProps> = ({ title, subTitle, icon, color = "primary", sx, ...other }) => {
  return (
    <Card
      sx={{
        py: 5,
        boxShadow: 0,
        textAlign: "center",
        color: (theme) => theme.palette[color].darker,
        bgcolor: (theme) => theme.palette[color].lighter,
        ...sx,
      }}
      {...other}
    >
      <IconWrapperStyle
        sx={{
          color: (theme) => theme.palette[color].dark,
          backgroundImage: (theme) => `linear-gradient(135deg, ${alpha(theme.palette[color].dark, 0)} 0%, ${alpha(theme.palette[color].dark, 0.24)} 100%)`,
        }}
      >
        <Iconify icon={icon} width={24} height={24} />
      </IconWrapperStyle>

      <Typography variant="h3">{title}</Typography>

      <Typography variant="subtitle2" sx={{ opacity: 0.72 }}>
        {subTitle}
      </Typography>
    </Card>
  )
}

export default TSideSection
